<template>
  <div class="app-container">
    <primary-search>
      <search-form
        :formItems="formItems"
        v-model:formData="searchParamsFrom"
        @updateData="handleUpdateData"
        manualReset
      />
    </primary-search>
    <primary-container>
      <template #tableHeader>
        <el-button
          type="primary"
          size="default"
          @click="handleEdit"
          v-hasPermi="['navSystem:all:all']"
          :icon="Plus"
        >
          新增系统
        </el-button>
      </template>
      <el-table
        :data="tableData"
        v-loading="loading"
        ref="tableRef"
        height="100%"
        border
        stripe
      >
        <el-table-column type="index" width="50" />
        <el-table-column
          prop="app_name"
          label="系统名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="app_url"
          label="系统链接"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="app_desc"
          label="系统简介"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="app_productor_id"
          label="负责人"
          show-overflow-tooltip
          width="160"
        >
          <template #default="scope">
            {{ userName(scope.row.app_productor_id) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="created_by"
          label="创建人"
          show-overflow-tooltip
          width="100"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          show-overflow-tooltip
          width="160"
        >
          <template #default="scope">
            {{
              proxy.$dayjs(scope.row.created_at).format('YYYY-MM-DD HH:mm:ss')
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130px" align="center">
          <template #default="{ row }">
            <div style="display: flex; justify-content: space-between">
              <el-link
                type="primary"
                :underline="false"
                :icon="Edit"
                @click="handleEdit(row)"
              >
                编辑
              </el-link>
              <el-link
                type="danger"
                :underline="false"
                :icon="Delete"
                @click="handleDel(row)"
              >
                删除
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-model:page="pages.page"
        v-model:pageSize="pages.pageSize"
        :total="total"
        @pageChange="getTableData"
      />
    </primary-container>
    <EditDialog
      :title="title"
      :dialogFormVisible="dialogFormVisible"
      @close="dialogFormVisible = false"
      :row="activeRow"
      @updateData="getTableData"
    />
  </div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from 'element-plus';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import { getCurrentInstance } from 'vue';
import { useTable } from '@/hooks/useTable';
import { getAppConfList, postDelAppConf } from '@/api/systemList';
import useUserStore from '@/store/modules/user';
import EditDialog from './components/editDialog.vue';
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const orgUserList = userStore.orgUserList;
const userName = id => {
  return userStore.getUserById(id);
};
const tableRef = ref(null);
// 编辑
const activeRow = ref({});
const dialogFormVisible = ref(false);
const title = ref('');
const formItems = reactive({
  app_name: {
    component: 'input',
    label: '系统名称',
    placeholder: '请输入'
    // disabled: true
  },
  app_productor_id: {
    component: 'cascader',
    label: '负责人',
    options: orgUserList
  }
});
// 由于负责人只需要提交最后一级id，所以备份处理数据
const searchParamsFrom = reactive({
  app_name: '',
  app_productor_id: []
});
const searchParams = reactive({
  app_name: '',
  app_productor_id: null
});
const { loading, tableData, pages, total, getTableData } = useTable(
  getAppConfList,
  {
    tableRef,
    searchParams,
    onPreprocess: () => {
      // console.log('onPreprocess');
      return Promise.resolve();
    },
    onSuccess: () => {
      // console.log('onSuccess');
    },
    onFinally: () => {
      // console.log('onFinally');
    }
  }
);
const handleUpdateData = type => {
  searchParams.app_name = searchParamsFrom.app_name;
  searchParams.app_productor_id =
    searchParamsFrom.app_productor_id[
      searchParamsFrom?.app_productor_id?.length - 1
    ];
  if (type === 'reset') {
    // 清空数据
    searchParams.app_name = '';
    searchParams.app_productor_id = null;
    searchParamsFrom.app_name = '';
    searchParamsFrom.app_productor_id = [];
  }
  getTableData();
};
// 编辑
const handleEdit = row => {
  if (row && row.id) title.value = '修改系统';
  else title.value = '新建系统';
  activeRow.value = row;
  dialogFormVisible.value = true;
};
// 删除
const handleDel = row => {
  ElMessageBox.confirm('是否确认删除该系统?', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      loading.value = true;
      postDelAppConf({ app_id: parseInt(row.id) }).then(() => {
        getTableData();
        ElMessage.success('删除成功！');
      });
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<style>
/* .el-popper {
  max-width: 300px;
} */
</style>
<style lang="scss" scoped></style>
